<template>
    <div class="pb-[80px]">
        <a-form :model="formState" ref="formRef" :label-col="{ style: { width: '120px' } }">
            <div class="bg-white rounded-[4px] p-[20px] mb-[10px]">
                <div class="mb-[30px]">
                    <span class="text-[16px]">站点底部信息</span>
                </div>
                <a-form-item label="联系地址" name="link_address" extra="联系地址带上标签，如-地址：成都市天府广场">
                    <a-input class="w-[300px]" v-model:value="formState.link_address" placeholder="请输入联系地址" />
                </a-form-item>
                <a-form-item label="联系电话" name="link_phone" extra="联系电话带上标签，如-电话：028-xxxxx">
                    <a-input class="w-[300px]" v-model:value="formState.link_phone" placeholder="请输入联系电话" />
                </a-form-item>
                <a-form-item label="电子邮箱" name="link_email" extra="电子邮箱带上标签，如-邮箱：xxxxx@xx.com">
                    <a-input class="w-[300px]" v-model:value="formState.link_email" placeholder="请输入电子邮箱" />
                </a-form-item>
                <a-form-item label="版权信息" name="copyright">
                    <a-input class="w-[300px]" v-model:value="formState.copyright" placeholder="请输入版权信息" />
                </a-form-item>
                <a-form-item label="ICP备案号" name="copyright">
                    <a-input class="w-[300px]" v-model:value="formState.icp" placeholder="请输入ICP备案号" />
                </a-form-item>
            </div>
            <div class="bg-white rounded-[4px] p-[20px] mb-[10px]">
                <div class="mb-[30px]">
                    <span class="text-[16px]">微信公众号</span>
                </div>
                <a-form-item label="微信公众号" name="qrcode_first" extra="建议宽高尺寸不要超过400px">
                    <upload-image v-model="formState.wxmp_qrcode" />
                </a-form-item>
                <a-form-item label="微信公众号" name="copyright" extra="微信公众号显示文案，如：扫一扫关注公众号">
                    <a-input class="w-[300px]" v-model:value="formState.wxmp_qrcode_text" placeholder="请输入文案" />
                </a-form-item>
            </div>
            <div class="bg-white rounded-[4px] p-[20px] mb-[10px]">
                <div class="mb-[30px]">
                    <span class="text-[16px]">微信小程序</span>
                </div>
                <a-form-item label="微信公众号" name="qrcode_first" extra="建议宽高尺寸不要超过400px">
                    <upload-image v-model="formState.wxapp_qrcode" />
                </a-form-item>
                <a-form-item label="微信公众号" name="copyright" extra="微信公众号显示文案，如：扫一扫关注公众号">
                    <a-input class="w-[300px]" v-model:value="formState.wxapp_qrcode_text" placeholder="请输入文案" />
                </a-form-item>
            </div>
        </a-form>
        <div
            class="fixed bottom-0 w-[100%] border-0 border-t-[1px] border-solid border-[#f2f2f2] bg-white flex justify-start  <lg:(w-full justify-center)  py-[20px]">
            <a-button class="mx-[140px]" type="primary" html-type="submit" @click="submitForm">确认保存</a-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { getFooterSetting, saveFooterSetting } from '@/utils/api/setting';
import { message } from 'ant-design-vue';
import UploadImage from '@/components/upload-image/index.vue';

const formRef = ref();

const formState = reactive({
    key: 'footer',
    link_address: '',
    link_phone: '',
    link_email: '',
    copyright: '',
    icp: '',
    wxmp_qrcode: '',
    wxmp_qrcode_text: '',
    wxapp_qrcode: '',
    wxapp_qrcode_text: '',
})

onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    // 获取默认配置
    getFooterSetting({ key: 'site' }).then((res: any) => {
        if (res.data) {
            formState.link_address = res.data.link_address;
            formState.link_phone = res.data.link_phone;
            formState.link_email = res.data.link_email;
            formState.copyright = res.data.copyright;
            formState.icp = res.data.icp;
            formState.wxmp_qrcode = res.data.wxmp_qrcode;
            formState.wxmp_qrcode_text = res.data.wxmp_qrcode_text;
            formState.wxapp_qrcode = res.data.wxapp_qrcode;
            formState.wxapp_qrcode_text = res.data.wxapp_qrcode_text;
        }
    })
};

const submitForm = () => {
    console.log(formState)
    formRef.value
        .validate()
        .then(() => {
            saveFooterSetting(formState).then((res: any) => {
                if (res.code == 200) {
                    message.success(res.message);
                } else {
                    message.error(res.message);
                }
            })
        });
}
</script>